{extend name="iframe" /}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list">
            <form action="{:request()->url()}" method="post" class="submit">
                <div class="layui-form-item">
                    <label class="layui-form-label">模块名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="classname" lay-verify="required" placeholder="模块名称" autocomplete="off" class="layui-input" value="">
                    </div>
                    <div class="layui-form-mid layui-text-em">中英文，如文章、产品。|| 生成带分类模块，推荐使用<a href="http://xnadmin.cn/index/CAddon/index.html" target="_blank" style="color: #00a0e9">云模块</a> </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">控制器</label>
                    <div class="layui-input-inline">
                        <input type="text" name="class" lay-verify="required" placeholder="控制器名" autocomplete="off" class="layui-input" value="">
                    </div>
                    <div class="layui-form-mid layui-text-em">驼峰命名，如Article、Product。</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生成文件</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="model" value="1" title="生成Model" checked>
                        <input type="checkbox" name="view" value="1" title="生成View" checked>
                        <input type="checkbox" name="table" value="1" title="生成数据表" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模版类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="tpl_type" value="0" title="常规table">
                        <input type="radio" name="tpl_type" value="1" title="layui渲染">
                    </div>
                    <div class="layui-form-mid layui-text-em">
                        常规table：使用常规table标签 <a href="http://demo.xnadmin.cn/admin/Index/index.html?p=/admin/article/index.html?bcid=23_24" target="_blank" style="color: #00a0e9">示例</a> &nbsp; &nbsp; &nbsp;
                        layui渲染：使用layui的table组件 <a href="http://demo.xnadmin.cn/admin/Index/index.html?p=/admin/article2/index.html?bcid=42_43" target="_blank" style="color: #00a0e9">示例</a> &nbsp; &nbsp;
                        <a href="https://layui.dev/docs/2/table/#demo-auto-render" target="_blank" style="color: #00a0e9">Layui table文档</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">加入导航</label>
                    <div class="layui-input-inline" style="width: 60px">
                        <input type="checkbox" name="auth" lay-filter="auth" lay-skin="switch" lay-text="是|否" value="1" checked>
                    </div>
                    <div class="layui-input-inline" style="width: 300px" id="authSelect">
                        <select name="pid">
                            <option value="0">顶级分类</option>
                            {foreach name="authList" item="vo"}
                            <option value="{$vo.id}">{$vo._name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">创建数据表</label>

                    <div class="layui-input-block">
                        <div class="layui-form-mid layui-text-em"><span style="color: red">默认创建id,create_time,update_time字段，不用添加</span></div>
                        <table class="layui-hide" id="ID-table"></table>
                    </div>
                    <div class="layui-input-block" style="padding-top: 8px">
                        <button class="layui-btn layui-btn-sm" type="button">快捷添加</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addName">名称 name</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addTitle">标题 title</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addImage">图片 image</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addImages">图集 images</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addNumber">数量 number</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addPrice">价格 price</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addType">类型 type</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addRemark">备注 remark</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addContent">详情 content</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" lay-on="addStatus">状态 status</button>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <br>
                        <button type="submit" lay-submit lay-filter="form-submit" class="layui-btn">生成文件</button>
                    </div>
                </div>
            </form>
            <div id="result"></div>
        </div>
    </div>
</div>
<script type="text/html" id="tpl-name">
    <input type="text" name="name" value="{{ d.name }}" class="layui-input" placeholder="必填" autocomplete="off" />
</script>

<script type="text/html" id="tpl-field">
    <input type="text" name="field" value="{{ d.field }}" class="layui-input" placeholder="必填" autocomplete="off" />
</script>

<script type="text/html" id="tpl-default_value">
    <input type="text" name="default_value" value="{{ d.default_value }}" class="layui-input" placeholder="可不填" autocomplete="off" />
</script>

<script type="text/html" id="tpl-type">
    <select name="type" class="layui-border select-type" lay-ignore>
        <option value="varchar" {{= d.type === 'varchar' ? 'selected' : '' }}>varchar(50)</option>
        <option value="varchar" {{= d.type === 'varchar255' ? 'selected' : '' }}>varchar(255)</option>
        <option value="int" {{= d.type === 'int' ? 'selected' : '' }}>int(11)</option>
        <option value="tinyint" {{= d.type === 'tinyint' ? 'selected' : '' }}>tinyint(1)</option>
        <option value="text" {{= d.type === 'text' ? 'selected' : '' }}>text</option>
        <option value="longtext" {{= d.type === 'longtext' ? 'selected' : '' }}>longtext</option>
        <option value="decimal" {{= d.type === 'decimal' ? 'selected' : '' }}>decimal(10,2)</option>
        <option value="datetime" {{= d.type === 'datetime' ? 'selected' : '' }}>datetime</option>
        <option value="date" {{= d.type === 'date' ? 'selected' : '' }}>date</option>
    </select>
</script>

<script type="text/html" id="tpl-form_type">
    <select name="type" class="layui-border select-form_type" lay-ignore>
        <option value="hidde" {{= d.form_type === 'hidde' ? 'selected' : '' }}>不显示</option>
        <option value="input" {{= d.form_type === 'input' ? 'selected' : '' }}>文本input</option>
        <option value="image" {{= d.form_type === 'image' ? 'selected' : '' }}>单图上传组件</option>
        <option value="images" {{= d.form_type === 'images' ? 'selected' : '' }}>多图上传组件</option>
        <option value="number" {{= d.form_type === 'number' ? 'selected' : '' }}>数字number</option>
        <option value="textarea" {{= d.form_type === 'textarea' ? 'selected' : '' }}>文本域textarea</option>
        <option value="radio" {{= d.form_type === 'radio' ? 'selected' : '' }}>单选radio</option>
        <option value="select" {{= d.form_type === 'select' ? 'selected' : '' }}>下拉select</option>
        <option value="editor" {{= d.form_type === 'editor' ? 'selected' : '' }}>编辑器Editor</option>
    </select>
    {{#  if(d.form_type == 'select' ||d.form_type == 'radio'){ }}
    <textarea class="layui-textarea" name="form_rule" placeholder="格式示例&#10;1|男&#10;2|女" style="width: 100%;">{{ d.form_rule }}</textarea>
    {{#  } }}
</script>

<script type="text/html" id="tpl-is_required">
    <input type="checkbox" name="is_required" lay-filter="is_required" lay-skin="switch" lay-text="是|否" value="1" {{= d.is_required==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="tpl-column">
    <input type="checkbox" name="column" lay-filter="column" lay-skin="switch" lay-text="是|否" value="1" {{= d.column==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="tpl-search">
    <input type="checkbox" name="search" lay-filter="search" lay-skin="switch" lay-text="是|否" value="1" {{= d.search==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="tpl-operate">
    {{#  if(d.operate == 'add'){ }}
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    {{#  } else { }}
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    {{#  } }}
</script>
{/block}

{block name="js"}
<script>
    layui.use( function(){
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var util = layui.util;

        // 已知数据渲染
        table.render({
            elem: '#ID-table',
            css: [
                // 对开启了编辑的单元格追加样式
                '.layui-table-view td[data-edit]{color: #16B777;}',
                '.layui-table-cell{height: 50px; line-height: 40px;}',
                '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
                '.layui-table-cell select{height: 36px; padding: 0 5px;}'
            ].join(''),
            lineStyle: 'height: auto;', // 定义表格的多行样式
            cols: [[ //标题栏
                {field: 'field', title: '字段名',  /*edit: 'editable,'*/templet: '#tpl-field'},
                {field: 'name', title: '中文名称', /* edit: 'editable',*/templet: '#tpl-name'},
                {field: 'type', title: '字段类型', width: 160, unresize: true, templet: '#tpl-type'},
               /* {field: 'length', title: '长度',  templet: '#tpl-length'},
                {field: 'decimal', title: '小数位',  templet: '#tpl-decimal'},*/
                {field: 'default_value', title: '默认值', templet: '#tpl-default_value'},
                {field: 'form_type', title: '表单类型', width: 160, unresize: true,  templet: '#tpl-form_type'},
                {field: 'is_required', title: '是否必填',  templet: '#tpl-is_required'},
                {field: 'column', title: '列表显示',  templet: '#tpl-column'},
                {field: 'search', title: '搜索显示',  templet: '#tpl-search'},
                {field: 'operate',title: '操作',width: 80,  templet: '#tpl-operate'}
            ]],
            data: [
                {
                    name: '',
                    field: '',
                    type: 'varchar',
                    default_value: '',
                    form_type: 'hidde',
                    is_required: '0',
                    column: '0',
                    search: '0',
                    operate: 'add'
                }
            ],
            //skin: 'line', // 表格风格
            //even: true,

            done: function(res, curr, count){
                var options = this;
                // 获取当前行数据
                table.getRowData = function(tableId, elem){
                    var index = $(elem).closest('tr').data('index');
                    return table.cache[tableId][index] || {};
                };

                //修改名称
                $(':input[name="name"]').on('blur', function(){
                    var value = $(this).val();
                    var data = table.getRowData(options.id, this);
                    data.name = value;
                });

                //修改字段名
                $(':input[name="field"]').on('blur', function(){
                    var value = $(this).val();
                    var data = table.getRowData(options.id, this);
                    data.field = value;
                });

                //修改默认值
                $(':input[name="default_value"]').on('blur', function(){
                    var value = $(this).val();
                    var data = table.getRowData(options.id, this);
                    data.default_value = value;
                });

                //修改form_rule
                $(':input[name="form_rule"]').on('blur', function(){
                    var value = $(this).val();
                    var data = table.getRowData(options.id, this);
                    data.form_rule = value;
                });

                // 原生 select 事件
                var tableViewElem = this.elem.next();
                tableViewElem.find('.select-type').on('change', function(){
                    var value = this.value; // 获取选中项 value
                    var data = table.getRowData(options.id, this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
                    // 更新数据中对应的字段
                    data.type = value;
                });
                tableViewElem.find('.select-form_type').on('change', function(){
                    var value = this.value; // 获取选中项 value
                    var data = table.getRowData(options.id, this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
                    // 更新数据中对应的字段
                    data.form_type = value;

                    // 显示选项数据框
                    table.reload('ID-table');
                });

                // 单元格编辑
                table.on('edit(ID-table)', function(obj){
                    var value = obj.value // 得到修改后的值
                    var data = obj.data // 得到所在行所有键值
                    var field = obj.field; // 得到字段
                    // 更新数据中对应的字段
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                });

                // 是否必填
                form.on('switch(is_required)', function(obj){
                    var data = table.getRowData(options.id, obj.elem);
                    data.is_required = obj.elem.checked ? 1 : 0;
                })

                // 列表显示
                form.on('switch(column)', function(obj){
                    var data = table.getRowData(options.id, obj.elem);
                    data.column = obj.elem.checked ? 1 : 0;
                })

                // 搜索显示
                form.on('switch(search)', function(obj){
                    var data = table.getRowData(options.id, obj.elem);
                    data.search = obj.elem.checked ? 1 : 0;
                })
            }
        });

        // 添加一空行
        var addEvent = function(){
            var data_list = table.cache['ID-table'];
            data_list.push({
                name: '',
                field: '',
                type: 'varchar',
                default_value: '',
                form_type: 'hidde',
                is_required: '0',
                column: '0',
                search: '0',
                operate: 'add'
            });
            // 根据 table.cache 重新渲染数据
            table.reload('ID-table', {
                data: data_list // 数据源
            })
        }

        table.on('tool(ID-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'add'){
                //更改operate状态
                obj.update({
                    operate: 'del'
                });
                addEvent();
            } else if(obj.event === 'delete'){
                obj.del();
            }
        });

        util.on('lay-on', {
            addName: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '名称',
                    field: 'name',
                    type: 'varchar',
                    default_value: '',
                    form_type: 'input',
                    is_required: '1',
                    column: '1',
                    search: '1',
                    operate: 'del'
                });
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addTitle: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '标题',
                    field: 'title',
                    type: 'varchar255',
                    default_value: '',
                    form_type: 'input',
                    is_required: '1',
                    column: '1',
                    search: '1',
                    operate: 'del'
                });
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addImage: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '图片',
                    field: 'image',
                    type: 'varchar255',
                    default_value: '',
                    form_type: 'image',
                    is_required: '0',
                    column: '0',
                    search: '0',
                    operate: 'del'
                });
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addImages: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '图集',
                    field: 'images',
                    type: 'text',
                    default_value: '',
                    form_type: 'images',
                    is_required: '0',
                    column: '0',
                    search: '0',
                    operate: 'del'
                });
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addNumber: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '数量',
                    field: 'number',
                    type: 'int',
                    default_value: '0',
                    form_type: 'number',
                    is_required: '0',
                    column: '1',
                    search: '0',
                    operate: 'del'
                });
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addPrice: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '价格',
                    field: 'price',
                    type: 'decimal',
                    default_value: '0.00',
                    form_type: 'number',
                    is_required: '0',
                    column: '1',
                    search: '0',
                    operate: 'del'
                });
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addType: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '类型',
                    field: 'type',
                    type: 'tinyint',
                    default_value: '',
                    form_type: 'select',
                    form_rule: '',
                    is_required: '1',
                    column: '1',
                    search: '1',
                    operate: 'del',
                })
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addStatus: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '状态',
                    field: 'status',
                    type: 'tinyint',
                    default_value: '',
                    form_type: 'hidde',
                    form_rule: '',
                    is_required: '0',
                    column: '0',
                    search: '0',
                    operate: 'del',
                })
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
            },
            addRemark: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '备注',
                    field: 'remark',
                    type: 'varchar255',
                    default_value: '',
                    form_type: 'textarea',
                    is_required: '0',
                    column: '0',
                    search: '0',
                    operate: 'del',
                })
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
           },
           addContent: function () {
                var data_list = table.cache['ID-table'];
                data_list.forEach(function(item){
                    if( item.operate == 'add' ) {
                        //删除添加的行
                        data_list.splice(data_list.indexOf(item), 1);
                    }
                });
                data_list.push({
                    name: '详情',
                    field: 'content',
                    type: 'longtext',
                    default_value: '',
                    form_type: 'editor',
                    is_required: '0',
                    column: '0',
                    search: '0',
                    operate: 'del',
                })
                table.reload('ID-table', {
                    data: data_list // 数据源
                });
                addEvent();
           },
        });

        layui.form.on('switch(auth)', function(data){
            if( this.checked ) {
                $('#authSelect').show();
            } else {
                $('#authSelect').hide();
            }
        });

        //提交
        form.on('submit(form-submit)', function(obj){
            if ( obj.field.tpl_type == null ) {
                layer.msg('请选择模板类型', {icon: 2});
                return false;
            }
            var data_list = table.cache['ID-table'];
            data_list.forEach(function(item){
                if( item.operate == 'add' ) {
                    //删除添加的行
                    data_list.splice(data_list.indexOf(item), 1);
                }
            });

            data = obj.field
            data.table_data = data_list;

            $.ajax({
                type: "post",
                url:"{:url('create')}",
                data: data,
                dataType:"json",
                success:function(res){
                    console.log(res)
                    if ( res.code === 1 ) {
                        layer.open({
                            content: res.msg,
                            btn: '关闭并刷新',
                            icon: 1,
                            yes: function(index){
                                layer.close(index);
                                parent.location.reload();
                            }
                        });
                    } else {
                        xn_alert(res.msg, {icon: 2})
                    }
                }
            })
            return false;
        });
    });
</script>
{/block}